<!-- 从业者端-完善信息-学历证明 -->
<template>
	<view class="container">
		<!-- 步骤条 -->
		<u-steps :list="stepsList" :current="2" active-color="#03B8CD" mode="number">
		</u-steps>
		<!-- picker弹窗 -->
		<u-picker v-model="show" :mode="mode" :range="range" @confirm="confirm"></u-picker>		
		<!-- picker弹窗 -->
		<u-picker v-model="pickerShow" :mode="mode" :range="range" @confirm="confirm"></u-picker>
		
		<!-- 有无毕业证 -->
		<view class="graduation-container">
			<text class="required">*</text>
			<text class="graduation-title">有无毕业证书：</text>
			<u-radio-group shape="circle"   v-model="value" @change="radioGroupChange" :activeColor="activeColor">
				<u-radio  v-for="(item, index) in list" :disabled="item.disabled"
					:key="index" :name="item.value"
				>{{item.name}}</u-radio>
			</u-radio-group>
		</view>
		
		<view class="form-container">
			<u-form :model="form" ref="form" :rules="rules">
				 <view class="form-section" v-if="value == 0">				 	 
						<view class="section-title">
							<view class="section-left">
								<text class="required">*</text>
								<text>上传毕业证</text>
								<text class="section-subtitle">优先上传图片格式，确保图中文字清晰可识别。</text>
								<view class="custom-link" @click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/学历证明/毕业证书.png')">
									毕业证示例
								</view>
							</view>
							<view class="section-updown">
								<u-upload
								   ref= "upload"
								   action="#" 
									 :file-list="form.licenseFiles" 
									 @on-list-change="byOnchange" 
									 @on-remove="(e) => byDeletePic(e, index)"
									 :multiple="false" 
									 max-count="1"
									 upload-text="上传毕业证" 
									 :custom-btn="true"
									 :auto-upload="false"
									 :show-progress= "false"
									 >
									<!-- 自定义上传图片 -->
									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
										<u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon>
									</view>
								</u-upload>
							</view>
						</view>
				 </view>
				 <view class="form-section" v-else>
					 <view class="section-title">
						 <view class="section-left">
						 		<text class="required">*</text>
						 		<text>上传学历承诺书</text>
						 		<text class="section-subtitle">优先上传图片格式，确保图中文字清晰可识别。</text>
								<view class="custom-link" @click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/工作证明/工作承诺书.png')">
									工作承诺书示例
								</view>
						 </view>
						 <view class="section-updown">
							 <u-upload
							 	 ref= "upload"
							 	 action="#" 
							 	 :file-list="form.licenseFilesCr" 
							 	 @on-list-change="byCrOnchange" 
							 	 @on-remove="(e) => byCrDeletePic(e, index)"
							 	 :multiple="false" 
							 	 max-count="1"
							 	 upload-text="上传学历承诺书" 
							 	 :custom-btn="true"
							 	 :auto-upload="false"
							 	 :show-progress= "false"
							 	 >
							 	<!-- 自定义上传图片 -->
							 	<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							 		<u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon>
							 	</view>
							 </u-upload>
						 </view>					 
					 </view>
				 </view>				
				<!-- 学信网截图 -->						
				<view class="form-section">
					<view class="section-title">
						<view class="">
							<text class="required">*</text>
							<text>学信网截图</text>
							<text class="section-xuexin">大专(含)及以上学历需上传</text>
						</view>
						<view
							class="custom-link"
							@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/学历证明/学信网在线验证报告.png')">
							学信网截图示例
						</view>
						<!-- <u-link href="#">学信网截图示例</u-link> -->
					</view>
					<u-upload 
				    	ref= "upload"
					   :action="action" 
						 :file-list="form.photoFiles" 
						 @on-list-change="crOnchange" 
						 @on-remove="(e) => crDeletePic(e, index)"
						 :multiple="false" 
						 max-count="1"
					   upload-text="学信网截图" 
						 :custom-btn="true"
						 :auto-upload="false"
						 :show-progress= "false"
						 >	
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
				</view>		


				<!-- 毕业时间 -->
				<view class="form-other">
					<view class="">
						<text class="required">*</text>
					</view>
					<view class="">
						<u-form-item label="毕业时间" prop="startDate" label-width="240">
							<u-input v-model="form.byTimeDate" placeholder="毕业时间" clearable @click="showChange('start')" />
						</u-form-item>
					</view>	
				</view>

				<!-- 毕业院校 -->
				<view class="form-other">
					<text class="required">*</text>
					<u-form-item label="毕业院校" prop="Culture" label-width="240">
						<u-input v-model="form.bySchool" placeholder="请输入毕业院校" clearable/>
					</u-form-item>
				</view>

				<!-- 按钮组 -->
				<view class="button-group">
					<u-button type="default" @click="handlePrev" shape="circle" :custom-style="customStyleObject">
						上一步
					</u-button>
					<u-button type="default" @click="handleNext" shape="circle" :custom-style="customStyleObjectBut" :loading="loading">
						信息无误，下一步
					</u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				// 有无学历选择
				value: 0,
				result: '有',
				activeColor: '#03B8CD',
				list: [
					{
						name: '有',
						checked: true,
						disabled: false,
						value: 0
					},
					{
						name: '无法提供',
						checked: false,
						disabled: false,
						value: 1
					}
				],
				// 日历 
				show: false,
				activeBgColor: '#03B8CD',
				btnType: "primary",
				inputType: "", //判断是起始日期还是有效日期
				
				// picker弹窗
				pickerShow: false,
				mode: "selector",
				range:  ['硕士生以上', '硕士', '本科', '专科'],

				loading: false,
				//图片上传地址
				action: 'http://127.0.0.1:7001/upload',
				// 图片数组
				licenseFiles: [],
				// 步骤条
				stepsList: [{
						name: "申报信息"
					},
					{
						name: "身份证件"
					},
					{
						name: "学历证明"
					},
					{
						name: "工作证明"
					},
					{
						name: "相关证书"
					},
				],
				
				form: {
					byTimeDate: '', //毕业时间
					bySchool: '', //毕业学校
					// 图片数组
					licenseFiles: [], ///学习证明
					licenseFilesId: '', //学习证明ID
					photoFiles: [], //学信截图
					photoFilesId: '' ,///学信截图ID
					licenseFilesCr: [], //、学历承诺书
					licenseFilesCrId:'', //学历承诺书ID
					
				},
				base64Data:'',

				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',
					color:"#03B8CD"

				},
				customStyleObjectBut: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff",
				},
				rules: {
					companyName: [{
						required: true,
						message: '请输入营业执照名称',
						trigger: 'blur'
					}],
					creditCode: [{
							required: true,
							message: '请输入社会信用代码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return /^[0-9A-Z]{18}$/.test(value);
							},
							message: '请输入18位统一社会信用代码',
							trigger: ['blur', 'change']
						}
					],
					legalPerson: [{
						required: true,
						message: '请输入法人姓名',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请选择起始日期',
						trigger: 'change'
					}]
				},
				ischanage: false
			}
		},
		onShow() {
			// 获取学历证明
			if(!this.ischanage) {
				this.getkzxl()
			} else {
				// 若是图片变化则还还原
				this.ischanage = false
			}
			
		},
		methods: {
			getkzxl() {
				this.$u.api.querykzxl({
					"usercode": uni.getStorageSync('usercode'), //#用户编号
				}).then(res => {
					console.log('学历：', res)
					let xlInfo = res.data.base_info
					this.form = {
						byTimeDate: xlInfo.cykzxl_bysj, //毕业时间
						bySchool: xlInfo.cykzxl_byyx, //毕业学校
						// // 图片数组
						licenseFilesId: xlInfo.cykzxl_byzsuri[0].imguri, //毕业证书ID
						photoFilesId: xlInfo.cykzxl_xxwjturi[0].imguri, ///学信网截图ID	
						licenseFilesCrId:xlInfo.cykzxl_xlcnsuri[0].imguri, //学习承诺书ID
					}						
					this.form.licenseFiles= [] //毕业证书
					this.form.photoFiles= [] ///学信网截图
					this.form.licenseFilesCr= [] //、学习承诺书	
					let byzsuri = this.chanageArray(xlInfo.cykzxl_byzsuri)
					this.form.licenseFiles = [...this.form.licenseFiles, ...byzsuri];
					let xxwjturi = this.chanageArray(xlInfo.cykzxl_xxwjturi)
					this.form.photoFiles = [...this.form.photoFiles, ...xxwjturi];
					let xlcnsuri = this.chanageArray(xlInfo.cykzxl_xlcnsuri)
					this.form.licenseFilesCr = [...this.form.licenseFilesCr, ...xlcnsuri];
					this.ischanage = true
					console.log('edit:',this.form)
				})
			},
			
			// 存储成数组对象
			chanageArray(uri) {
				// 存储成数组对象
				return  uri.map(item => ({
					url: item.url, // 临时路径
				}))
				
			},	
			
			// 营业执照上传
			// 图片上传，不管是否成功都会触发
			onchange(res, index, list) {
				this.licenseFiles = list;
				console.log("onchange:", this.licenseFiles)
			},

			// Picker弹窗
			showChange(type) {
				if(type == 'start') {
					// 日历
					this.inputType = type;
					this.mode = 'time'
					this.show = !this.show;					
				} else if (type == 'selector'){
					// 学历
					this.inputType = type;
					this.mode = 'selector'
					this.range = ['硕士生以上', '硕士', '本科', '专科'];
					this.pickerShow = !this.pickerShow;
				} else {					
					// 地区region
					this.inputType = type;
					this.mode = 'region'
					this.pickerShow = !this.pickerShow;
				}

			},
			
			// 单选项
			radioGroupChange(e) {
				console.log('sg:',e)
				this.result = e
				if(e == 0) {
					this.value = 0
				} else {
					this.value = 1
				}
				
			},
			
			// picker选择选择确认
			confirm(e) {
				if (this.inputType == 'start') {
					// 毕业时间
					// this.form.Culture = this.range[e[0]];
					this.form.byTimeDate = e.year + '-' + e.month + '-' + e.day
				} else {
					// 赋值地区
					this.form.selectRegion = e.province.label + '-' + e.city.label + '-' + e.area.label;;
				}
			},
			
			// 图片处理开始 
			// 当学历图片变化时
			byOnchange(list,name) {
				if(this.form.licenseFiles.length == 0) {
					// console.log('图片变化时-name：',name)
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						// console.log("onchange-1:", newFiles)
						// this.licenseFiles = file // 更新文件列表	
						this.form.licenseFiles = []
						// this.certificates[name].photoList = file.url
						this.form.licenseFiles = [...this.form.licenseFiles, ...newFiles];
						console.log("onchange-2:", this.form)
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64(0)
						})					
					}
				}				
			},
			
			// 上传Base64数据到服务器
			uploadBase64(index) {
				// console.log('upload:', this.base64Data)
				if (!this.base64Data) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					})
					return
				}	
				uni.showLoading({
					title: '上传中...'
				})		
				this.$u.api.uploadres({
					"usercode": uni.getStorageSync('usercode'),
					"rescode": this.base64Data,
					"restype": index,
					"resdesc": "上传照片"
				}).then(res => {					
					// 存储图片的ID
					if(index == 0) {
						this.form.licenseFilesId = res.data.base_info
						console.log('uploadres-licenseFilesId:', this.form.licenseFilesId)
					} else if (index == 1){
						this.form.photoFilesId = res.data.base_info
						console.log('uploadres-photoFilesId:', this.form.photoFilesId)
					} else if (index == 2) {
						this.form.licenseFilesCrId = res.data.base_info
						console.log('uploadres-licenseFilesCrId:', this.form.licenseFilesCrId)
					}
			   this.ischanage = true
				})
			},
			
			
			// 当学信网照片变化时
			crOnchange(list,name) {
				if(this.form.photoFiles.length == 0) {
					// console.log('图片变化时-name：',name)
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						// console.log("onchange-1:", newFiles)
						// this.licenseFiles = file // 更新文件列表	
						this.form.photoFiles = []
						// this.certificates[name].photoList = file.url
						this.form.photoFiles = [...this.form.photoFiles, ...newFiles];
						console.log("onchange-2:", this.form)
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64(1)
						})					
					}
				}				
			},	
			
			// 学历承诺书图变化时
			byCrOnchange(list,name) {
				if(this.form.licenseFilesCr.length == 0) {
					// console.log('图片变化时-name：',name)
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						// console.log("onchange-1:", newFiles)
						// this.licenseFiles = file // 更新文件列表	
						this.form.licenseFilesCr = []
						// this.certificates[name].photoList = file.url
						this.form.licenseFilesCr = [...this.form.licenseFilesCr, ...newFiles];
						console.log("onchange-2:", this.form)
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64(2)
						})					
					}
				}		
			},
			// 图片上传结束
			
			// 删除图片
			byDeletePic(event, index) {
				this.form.licenseFiles.splice(event, 1)
			},
			
			crDeletePic(event, index) {
				this.form.photoFiles.splice(event, 1)
			},
			
			byCrDeletePic() {
				this.form.licenseFilesCr.splice(event, 1)
			},

			// 上一步
			handlePrev() {
				// uni.navigateBack();
				uni.reLaunch({
					url: '/pages/Practitioner/perfectData/idCard'
				});
			},

			// 下一步
			handleNext() {
				this.$u.api.createkzxl({
					"usercode": uni.getStorageSync('usercode'), //#用户编号
					"cykzxlbyzsuri": this.form.licenseFilesId,//#毕业证书uri
					"cykzxlxxwjturi": this.form.photoFilesId,//#学历证书uri
					"cykzxlxlcnsuri": this.form.licenseFilesCrId,//#学历承诺书图片uri
					"cykzxlywbyz":"",//#学位
					"cykzxlbysj": this.form.byTimeDate,//#毕业时间
					"cykzxlbyyx": this.form.bySchool,//#毕业院校
				}).then(res => {
					console.log('学历证明：',res)
					uni.reLaunch({
					  url: '/pages/Practitioner/perfectData/workProve'
					});
					// uni.navigateTo({
					// 	url: '/pages/Practitioner/perfectData/workProve'
					// });
				}).catch(err => {
					this.$u.toast('保存失败！')
				})
			},
			previewImage(imageUrl) {
				console.log('预览成功',imageUrl);
				// 确保URL格式正确
				const fullUrl = imageUrl.startsWith('http') ? imageUrl : `https://${imageUrl}`;		
						console.log('预览成功-1',fullUrl);
				// 微信小程序图片预览
				uni.previewImage({
					urls: [fullUrl], // 需要预览的图片链接列表
					current: 0, // 当前显示图片的索引
					success: () => {
						console.log('预览成功');
					},
					fail: (err) => {
						console.log('预览失败', err);
						uni.showToast({
							title: '预览失败',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		// background-color: #f5f5f5;
		min-height: 100vh;


		.slot-btn {
			width: 104px;
			height: 104px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
			margin-left: 10px;
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

		.header {
			margin-bottom: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}
		
		// 有无毕业证书
		.graduation-container {		
			display: flex;
			
			.required {
				margin-left: 20px;
				color: #f56c6c;
				margin-right: 8rpx;
			}
			
			.graduation-title {
				margin-right: 30px;
				font-size: 16px;
			}
			
		}

		.form-container {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;

			.form-section {
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-content: flex-start;
				align-items: center;


				.section-title {
					display: flex;
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 16rpx;


				}		
				.section-subtitle {
					font-size: 26rpx;
					color: #b1b1b1;
					margin-bottom: 20rpx;
					display: block;
				}
				
				.section-xuexin {
					font-size: 26rpx;
					color: #f56c6c;
					margin-bottom: 20rpx;
					display: block;
				}
			}		
			
			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 150px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}
		.required {
			color: #f56c6c;
			margin-right: 8rpx;
		}
		.form-other {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.custom-link {
		  color: #03B8CD;
			font-size: 28rpx;
		  // text-decoration: underline;
		  // padding: 10rpx 0;
		}
	}
</style>